<template>
<l-layout class="l-tab-page">
    <l-panel style="padding:0;" >
        <template #toolRight >
            <el-button-group>
                <el-button size="mini" icon="el-icon-refresh-left" @click="handleRefresh" ></el-button>
            </el-button-group>
        </template>
        <div class="l-rblock" >
            <l-table
                :loading="tableLoading"
                :columns="columns" 
                :dataSource="tableData" 
                row-key="f_Id"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"

                @loadPageData="turnTablePage"
                >
                <template v-slot:f_CreateDate="scope" >
                    {{lr_dateFormat(scope.row.f_CreateDate)}}
                </template>
                <template v-slot:f_Type="scope" >
                    <el-tag v-if="scope.row.f_Type != 1" size="mini" type="info" >草稿</el-tag>
                    <el-tag v-else size="mini" type="success">正式</el-tag>
                </template>
                <template v-slot:f_IsVerison="scope" >
                    <el-switch
                        v-model="scope.row.f_IsVerison"
                        :disabled="scope.row.f_IsVerison"
                        @change="handleEnableChange(scope.row)"
                        >
                    </el-switch>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </div>
    </l-panel>


    <l-dialog
        :title="`${$t('表单预览')}-${previewTitle}`"
        :visible.sync="previewVisible"
        :height="600"
        width="800px"
        :hasBtns="false"

        @opened="handlePreviewOpened"
        @closed="handlePreviewClosed"
        >
        <preview :loading="previewLoading" ref="preview" ></preview>

    </l-dialog>

</l-layout>
</template>

<script>
const api = window.$api.custmerForm.scheme
import preview from './preview'
export default {
    components: {
        preview
    },
    props: {
        schemeInfoId:String,
        schemeId:String,
        updateSchemeId:Function
    },
    data () {
        return {
            noAuth:true,

            columns: [
                {label:'创建人',prop:'f_CreateUserName',minWidth:'160'},
                {label:'创建时间',prop:'f_CreateDate',minWidth:'160'},                
                {label:'状态',prop:'f_Type',width:'64',align:'center'},
                {label:'当前版本',prop:'f_IsVerison',width:'80',align:'center'}
            ],
            tableBtns:[
                {prop:'Preview',label:'预览'}
            ],
            tableLoading:false,
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,
            tableData: [],


            // 表单预览
            previewVisible:false,
            previewTitle:'',
            previewLoading:false,
            formEditRow:null
        };
    },
    computed:{
    },
    methods:{
        handleRefresh(){
            this.loadTablePageData()
        },
        loadTablePageData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:'F_CreateDate DESC'
            }
            api.getHistoryPage(this.schemeInfoId,queryData).then(res=>{
                const data = this.$deepClone(res.data.data);
                this.tableData = data.rows.map(t=>{ return {...t,f_IsVerison:t.f_Id == this.schemeId} });
                this.tableTotal = data.records;
                this.tableLoading = false;
            }).catch(()=>{
                this.tableData = [];
                this.tableLoading = false;
            })
        },
        turnTablePage({rows}){
            this.tablePageSize = rows;
            this.loadTablePageData(true);
        },
        handleEnableChange(row){
            this.updateSchemeId(row.f_Id);
            this.tableData.forEach(item=>{
                if(item.f_Id != row.f_Id){
                    item.f_IsVerison = false
                }
            })
            api.updateHistory(this.schemeInfoId,row.f_Id).then(()=>{
                this.$message({
                    type: 'success',
                    message: '更新成功!'
                });
            })
        },

        handlePreview($index,row){
            this.formEditRow = row;
            this.previewLoading = true;
            this.previewTitle = this.lr_dateFormat(row.f_CreateDate);
            this.previewVisible = true;
        },
        handlePreviewOpened(){
            api.getHistory(this.formEditRow.f_Id).then(res=>{
                this.$refs.preview.setForm(res.data.data);
                this.previewLoading = false;
            }).catch(()=>{
                this.previewLoading = false;
            })
        },
        handlePreviewClosed(){
            this.$refs.preview.resetForm();
        },
    }

}
</script>